document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('form');
    const courseTypeList = document.getElementById('course-type-list');

    // 绑定表单提交事件
    form.addEventListener('submit', function (event) {
        event.preventDefault();

        // 获取用户输入的课程类型名称
        const typeName = document.getElementById('type-name').value;
        const token = localStorage.getItem('access_token');
        // 检查输入是否为空
        if (!typeName) {
            alert('课程类型名称不能为空！');
            return;
        }

        // 使用 fetch 提交表单数据
        fetch('/api/course-types/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify({
            type_name: typeName
        })
})
        .then(response => {
            if (response.ok) {
                location.reload();
            } else {
                throw new Error('提交失败');
            }
        })
        .then(html => {
            // 更新课程类型列表
            courseTypeList.innerHTML = html;
            bindDeleteButtons();
            form.reset();
        })
        .catch(error => {
            console.error('错误:', error);
        });
    });
});